@babel/plugin-transform-modules-systemjs

What is @babel/plugin-transform-modules-systemjs?

The @babel/plugin-transform-modules-systemjs package is a plugin for Babel that transforms ECMAScript modules to SystemJS format. This is useful for enabling module loading in environments that do not natively support ES modules, or for integrating with module loaders that expect SystemJS format. It allows developers to write their code using the standard ES6 module syntax and then compile it to a format that is compatible with the SystemJS loader.

What are @babel/plugin-transform-modules-systemjs's main functionalities?

Transform ES modules to SystemJS

This feature allows you to write your modules using ES6 import/export syntax and then transform them into SystemJS format. The code sample shows a simple import statement that would be converted to SystemJS format by the plugin.

import { foo } from 'my-module';
foo();

Customizable module IDs

The plugin allows for customization of the generated module IDs, enabling better integration with existing SystemJS configurations and module naming conventions. The code sample illustrates an export statement that would be transformed, with the module ID being customizable.

export const myExport = () => 'Hello World';

Interop with CommonJS and AMD modules

The plugin provides interoperability with CommonJS and AMD modules, allowing them to be imported into SystemJS formatted modules. The code sample demonstrates importing a CommonJS module and using it within an ES module.

import cjsModule from 'commonjs-module';
cjsModule.doSomething();

Other packages similar to @babel/plugin-transform-modules-systemjs

@babel/plugin-transform-modules-commonjs

This package transforms ES6 modules to CommonJS format. It is similar to @babel/plugin-transform-modules-systemjs but targets a different module system. While SystemJS is a dynamic module loader that can load various module formats, CommonJS is a standard for Node.js and is used for server-side and some client-side JavaScript applications.

@babel/plugin-transform-modules-amd

This Babel plugin transforms ES6 modules to Asynchronous Module Definition (AMD) format. Similar to the SystemJS plugin, it allows for writing modules in ES6 syntax and compiling them to a format compatible with AMD loaders like RequireJS. The main difference is the target module system; AMD is primarily used for asynchronous loading of modules in browsers.

rollup-plugin-commonjs

This is a plugin for Rollup, a module bundler, that converts CommonJS modules into ES6 so they can be included in a Rollup bundle. It serves a similar purpose to @babel/plugin-transform-modules-systemjs by enabling the use of a different module format, but it is specific to the Rollup ecosystem and focuses on the conversion from CommonJS to ES6 rather than the other way around.

README

@babel/plugin-transform-modules-systemjs

This plugin transforms ES2015 modules to SystemJS

See our website @babel/plugin-transform-modules-systemjs for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-modules-systemjs

or using yarn:

yarn add @babel/plugin-transform-modules-systemjs --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)